import { defineComponent, onUpdated, PropType, ref } from 'vue';
import { MainLayouts } from '../../layouts/MainLayouts';
import { Icon } from '../../shared/Icon';
import { Tabs } from '../../shared/Tabs';
import { Tab } from '../../shared/Tab';
console.log(Tab);

import s from './ItemCreate.module.scss';
import { InputPad } from './InputPad';
export const ItemCreate = defineComponent({
    props: {
        // name: {
        //     type: String as PropType<string>
        // },
        selected: {//value
            type: String as PropType<string>,
            required: false
        }
    },
    emits: ['update:selected'],//事件
    setup: (props, context) => {
        const refKind = ref("支出")
        const refExpensesTags = ref([
            { id: 1, name: '餐费', sign: '￥', category: 'expenses' },
            { id: 2, name: '打车', sign: '￥', category: 'expenses' },
            { id: 3, name: '聚餐', sign: '￥', category: 'expenses' },
            { id: 4, name: '打车', sign: '￥', category: 'expenses' },
            { id: 5, name: '聚餐', sign: '￥', category: 'expenses' },
            { id: 6, name: '打车', sign: '￥', category: 'expenses' },
            { id: 7, name: '聚餐', sign: '￥', category: 'expenses' },
        ])
        const refIncomeTags = ref([
            { id: 4, name: '工资', sign: '￥', category: 'income' },
            { id: 5, name: '彩票', sign: '￥', category: 'income' },
            { id: 6, name: '滴滴', sign: '￥', category: 'income' },
            { id: 11, name: '彩票', sign: '￥', category: 'income' },
            { id: 18, name: '滴滴', sign: '￥', category: 'income' },
            { id: 17, name: '彩票', sign: '￥', category: 'income' },
            { id: 19, name: '滴滴', sign: '￥', category: 'income' },
            { id: 4, name: '工资', sign: '￥', category: 'income' },
            { id: 5, name: '彩票', sign: '￥', category: 'income' },
            { id: 6, name: '滴滴', sign: '￥', category: 'income' },
            { id: 11, name: '彩票', sign: '￥', category: 'income' },
            { id: 18, name: '滴滴', sign: '￥', category: 'income' },
            { id: 17, name: '彩票', sign: '￥', category: 'income' },
            { id: 19, name: '滴滴', sign: '￥', category: 'income' },
            { id: 4, name: '工资', sign: '￥', category: 'income' },
            { id: 5, name: '彩票', sign: '￥', category: 'income' },
            { id: 6, name: '滴滴', sign: '￥', category: 'income' },
            { id: 11, name: '彩票', sign: '￥', category: 'income' },
            { id: 18, name: '滴滴', sign: '￥', category: 'income' },
            { id: 17, name: '彩票', sign: '￥', category: 'income' },
            { id: 19, name: '滴滴', sign: '￥', category: 'income' },
            { id: 4, name: '工资', sign: '￥', category: 'income' },
            { id: 5, name: '彩票', sign: '￥', category: 'income' },
            { id: 6, name: '滴滴', sign: '￥', category: 'income' },
            { id: 11, name: '彩票', sign: '￥', category: 'income' },
            { id: 18, name: '滴滴', sign: '￥', category: 'income' },
            { id: 17, name: '彩票', sign: '￥', category: 'income' },
            { id: 19, name: '滴滴', sign: '￥', category: 'income' },
            { id: 4, name: '工资', sign: '￥', category: 'income' },
            { id: 5, name: '彩票', sign: '￥', category: 'income' },
            { id: 6, name: '滴滴', sign: '￥', category: 'income' },
            { id: 11, name: '彩票', sign: '￥', category: 'income' },
            { id: 18, name: '滴滴', sign: '￥', category: 'income' },
            { id: 17, name: '彩票', sign: '￥', category: 'income' },
            { id: 19, name: '滴滴', sign: '￥', category: 'income' },
        ])

        return () => (
            < MainLayouts  >{{
                title: () => "记一笔",
                icon: () => <Icon name='left' class={s.left}></Icon>,
                default: () => <>
                    <div class={s.wrapper}>
                        <Tabs v-model:selected={refKind.value}
                            selected={refKind.value}
                            onUpdate:selected={() => console.log(1)} class={s.tabs}>
                            <Tab name="支出" class={s.tags_wrapper}>
                                <div class={s.tag}>
                                    <div class={s.sign}>
                                        <Icon name="add" class={s.createTag} />
                                    </div>
                                    <div class={s.name}>
                                        新增
                                    </div>
                                </div>
                                {refExpensesTags.value.map(tag =>
                                    <div class={[s.tag, s.selected]}>
                                        <div class={s.sign}>
                                            {tag.sign}
                                        </div>
                                        <div class={s.name}>
                                            {tag.name}
                                        </div>
                                    </div>
                                )}
                            </Tab>
                            <Tab name="收入" class={s.tags_wrapper}>
                                <div class={s.tag}>
                                    <div class={s.sign}>
                                        <Icon name="add" class={s.createTag} />
                                    </div>
                                    <div class={s.name}>
                                        新增
                                    </div>
                                </div>
                                {refIncomeTags.value.map(tag =>
                                    <div class={[s.tag, s.selected]}>
                                        <div class={s.sign}>
                                            {tag.sign}
                                        </div>
                                        <div class={s.name}>
                                            {tag.name}
                                        </div>
                                    </div>
                                )}
                            </Tab>
                        </Tabs>
                        <div class={s.inputPad_wrapper}>
                            <InputPad />
                        </div>
                    </div>
                </>
            }}</MainLayouts >

        )
    }
})